<template>
    <div class="insert-contis">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">仓库列表</el-breadcrumb-item>
            <el-breadcrumb-item>修改仓库</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-form ref="formRef" :model="form" label-width="120px" :rules="formRules">
                <el-form-item label="仓库ID" prop="id">
                    <el-input v-model="form.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="输入仓库名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="仓库类型" prop="type">
                    <el-select v-model="form.type" placeholder="选择仓库类型">
                        <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建主管" prop="manager">
                    <el-input v-model="form.manager"></el-input>
                </el-form-item>
                <el-form-item label="主管电话" prop="phone">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="商品地址" prop="address">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" prop="xunze">
                    <el-select v-model="form.xunze" placeholder="选择是否启用">
                        <el-option v-for="item in xunzes" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间" prop="createTime">
                    <el-date-picker v-model="form.createTime" type="createTime" disabled placeholder="创建时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="更新时间" prop="updateTime">
                    <el-date-picker v-model="form.updateTime" type="updateTime" disabled placeholder="更新时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button @click="$router.back()">取消</el-button>
                    <el-button type="primary" @click="submit">提交</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElForm } from 'element-plus';
import request from '@/api/request';
import { useRouter,useRoute } from 'vue-router';
let emits = defineEmits(["closeDialog"])

const router = useRouter();
const route = useRoute();
const warehouseId = route.query.id;

const form = ref({
    name: '',
    type: '',
    manager: '',
    phone: '',
    address: '',
    xunze: '',
    createTime: null,
    updateTime: null
});
const types = ref([
    { value: "成品仓库", label: "成品仓库" },
    { value: "原材料仓库", label: "原材料仓库" }
]);
const xunzes = ref([
    { value: "是", label: "是" },
    { value: "否", label: "否" }
]);
const formRules = ref({
    name: [{ request: true, message: '请输入仓库名称', trigger: 'blur' }],
    type: [{ request: true, message: '请选择仓库类型', trigger: 'change' }],
    manager: [{ request: true, message: '请输入仓库主管', trigger: 'blur' }],
    phone: [{ request: true, message: '请输入主管电话', trigger: 'blur' }],
    address: [{ request: true, message: '请输入商品地址', trigger: 'blur' }],
    xunze: [{ request: true, message: '请输入是否启用', trigger: 'change' }],
});
const formRef = ref(null);
const loadwarehousesDetail = () => {
    if (!warehouseId) {
        ElMessage.error("未找到仓库ID");
        router.back();
        return;
    }
    request({
        method: "get",
        url: "/warehouse/tree",
    }).then(res => {
        if (res.code === 200) {
            const warehouse = res.data.find(item => item.warehouseId === warehouseId);
            if (warehouse) {
                form.value = {
                    id: warehouse.warehouseId,
                    name: warehouse.warehouseName,
                    type: warehouse.warehouseType,
                    manager: warehouse.managerId,
                    phone: warehouse.managerPhone,
                    address: warehouse.address,
                    xunze: warehouse.isEnabled ? "是" : "否",
                    createTime: new Date(warehouse.createTime),
                    updateTime: new Date(warehouse.updateTime)
                };
            } else {
                ElMessage.error("仓库不存在");
                router.back();
            }
        } else {
            console.error("查询失败:", res.message);
            ElMessage.error(`加载失败:${res.message}`);
        }
    }).catch(err => {
        console.error("请求异常:", err);
        ElMessage.error(`加载异常:${err.message}`)
    });
};
onMounted(loadwarehousesDetail);
const submit = () => {
    formRef.value.validate((isValid) => {
        if (isValid) {
            const submitDate = {
                warehouseId: form.value.id,
                warehouseName: form.value.name,
                warehouseType: form.value.type,
                managerId: form.value.manager,
                managerPhone: form.value.phone,
                address: form.value.address,
                isEnabled: form.value.xunze === "是",
                updateTime: new Date()
            };
            request({
                method: "put",
                url: "/warehouse/update",
                data: submitDate
            }).then(res => {
                if (res.data.success) {
                    ElMessage.success("修改成功");

                    emits("closeDialog")
                } else {
                    console.error("修改失败", res.message);
                    ElMessage.error(`修改失败:${res.message}`);
                }
            }).catch(err => {
                console.error("请求异常" + err);
                ElMessage.error("提交失败");
            });
        }
    });
}
</script>
<style scoped>
.insert-container {
    padding: 20px;
}

.el-breadcrumb {
    margin-bottom: 20px;
}
</style>
